<template>
  <BasicModal :title="title" :width="width" :showOkBtn="false" :visible="visible" :confirmLoading="false" @cancel="handleCancel"
    cancelText="关闭">
    <div>
      <Descriptions bordered size="default">
        <Descriptions.Item colonMarginRight="4" label="姓名">{{ formData.userName }}</Descriptions.Item>
        <Descriptions.Item label="试卷总分">{{ formData.examScore }}</Descriptions.Item>
        <Descriptions.Item label="考试得分">{{ formData.userScore }}</Descriptions.Item>
      </Descriptions>
      <br />
    </div>
    <a-card v-for="question in  allIQutem" :title="question.sort + 1 + '.' + question.content" :bordered="false"
      style="width: 100%" size="small">
      <template #extra>
        {{question.isRight}}&nbsp;答案:{{ question.rightAnswer }}
        <!-- <p style="color:red;">正确答案</p> -->
        <!-- <p v-if="question.isRight == 'true'">正确 答案</p>
        <p v-if="question.isRight == 'false'">错误 答案</p> -->
      </template>
      <p v-if="question.questionType == '单选题' || question.questionType == '判断题'" v-for="aitem in question.answerList">
        <a-radio :checked="aitem.checked == '1'" disabled ></a-radio>{{ aitem.content }}
      </p>
      <p v-if="question.questionType == '多选题'" v-for="aitem in question.answerList">
        <a-checkbox :checked="aitem.checked == '1'" disabled />&nbsp;&nbsp;{{ aitem.content }}
      </p>
    </a-card>
  </BasicModal>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick, defineExpose } from 'vue';
import { queryPaper } from '../LabExamPaper.api';
import { Descriptions } from 'ant-design-vue';
import { BasicModal } from '/@/components/Modal';


const title = ref<string>('考试详情');
const width = ref<number>(1200);
const visible = ref<boolean>(false);

const allIQutem = ref([]);
const formData = reactive<Record<string, any>>({
  id: '',
  userId: '',
  userName: '',
  departId: '',
  departName: '',
  examId: '',
  examTitle: '',
  examTime: undefined,
  userTime: undefined,
  examScore: undefined,
  passScore: undefined,
  userScore: undefined,
  state: '',
  limitTime: '',
  LabExamPaperPage: [],
});

function reset() {
  formData.id = null;
  formData.userId = '';
  formData.userName = '';
  formData.departId = '';
  formData.departName = '';
  formData.examId = '';
  formData.examTitle = '';
  formData.examTime = '';
  formData.userTime = '';
  formData.examScore = '';
  formData.passScore = '';
  formData.userScore = '';
  formData.state = '';
  formData.limitTime = '';
  formData.LabExamPaperPage = [];
}


/**
 * 编辑
 */
function edit(record) {
  visible.value = true;
  nextTick(async () => {
    reset();
    //赋值
    Object.assign(formData, record);
    formData.LabExamPaperPage = await queryPaper({ paperId: record.id });
    allIQutem.value = [];
    formData.LabExamPaperPage.radioList.forEach(item => {
      // console.log(item);
      allIQutem.value.push(item);
    })
    formData.LabExamPaperPage.multiList.forEach(item => {
      allIQutem.value.push(item);
    })
    formData.LabExamPaperPage.judgeList.forEach(item => {
      allIQutem.value.push(item);
    })
  });
}


/**
 * 取消按钮回调事件
 */
function handleCancel() {
  visible.value = false;
}

defineExpose({
  edit,
});
</script>

<style>
/**隐藏样式-modal确定按钮 */
.jee-hidden {
  display: none !important;
}
</style>
